<template>
  <div class="generalRecord_page">
    <van-nav-bar
      title="总记录"
      left-arrow
      @click-left="$router.push('/groupStock')"
      left-text="返回"
    />
    <div class="head">
      <div>总资本</div>
      <div style="margin-top: 6px" v-show="allZiBen" >￥<span>{{ (allZiBen / 1000).toFixed(2) }}</span><span>元</span></div>
      <span v-show="!!!allZiBen">暂无</span>
    </div>


    <van-dropdown-menu>
      <van-dropdown-item
        :title="needStockObj.name ? needStockObj.name : title1"
        v-model="value1"
        :options="option1"
        @change="doChangeStock"
        v-show = " value2 != 'd' && value2 != 'e'"
        :disabled="isDisabled"
      />
      <van-dropdown-item :title=" value2 ? needTypeObj.name : '请选择分类'" v-model="value2" :options="option2" @change="doChangeType" />
    </van-dropdown-menu>


    <div v-if="recordList.length" >
      <van-cell style="font-size: 12px">
        <!-- 分红  -->
        <div v-show="value2 === 'a'">
          <van-row style="text-align: center; vertical-align: center; font-weight: bolder; font-size: 13px" align="center" type="flex" justify="space-between">
            <van-col span="6">时间</van-col>
            <van-col span="6">每股分红(￥)</van-col>
            <van-col span="6">分红数量</van-col>
            <van-col span="6">合计</van-col>
          </van-row>
          <van-row type="flex" style="text-align:center" align="center" justify="space-between" v-for="item in recordList" :key="item.id">
            <van-col span="6">{{item.bonus_time}}</van-col>
            <van-col span="6">{{item.pjfh}}</van-col>
            <van-col span="6">{{item.canbonusing}}</van-col>
            <van-col span="6">{{item.bonus_amount}}</van-col>
          </van-row>
        </div>


        <!-- 买入记录   -->
        <div v-show="value2 === 'b'">
          <van-row style="text-align: center; vertical-align: center; font-weight: bolder; font-size: 13px" align="center" type="flex" justify="space-between">
            <van-col span="6">时间</van-col>
            <van-col span="6">每股股价(￥)</van-col>
            <van-col span="6">买入数量</van-col>
            <van-col span="6">金额(￥)</van-col>
          </van-row>

          <van-row type="flex" style="text-align:center" align="center" justify="space-between" v-for="item in recordList" :key="item.id">
            <van-col span="6">{{item.createdate}}</van-col>
            <van-col span="6">{{(item.price / 1000).toFixed(3) }}</van-col>
            <van-col span="6">{{item.amount}}</van-col>
            <van-col span="6">{{ (item.money / 1000).toFixed(3) }}</van-col>
          </van-row>
        </div>



        <!-- 挂单、已撤单、已成交   -->
        <div v-show="value2 === 'c0' || value2 === 'c1' || value2 === 'c2'">
          <van-row style="text-align: center; vertical-align: center; font-weight: bolder; font-size: 13px" align="center" type="flex" justify="space-between">
            <van-col span="7">时间</van-col>
            <van-col span="4">每股股价(￥)</van-col>
            <van-col span="4">卖出数量</van-col>
            <van-col span="4">可卖出到账</van-col>
            <van-col span="4">{{value2 === 'c1' ? '说明' : '操作'}}</van-col>
          </van-row>

          <van-row type="flex" style="text-align:center" align="center" justify="space-between" v-for="item in recordList" :key="item.id">
            <van-col span="7">{{item.createdate}}</van-col>
            <van-col span="4">{{(item.price / 1000).toFixed(3)}}</van-col>
            <van-col span="4">{{item.amount}}</van-col>
            <van-col span="4">{{(item.price * item.amount / 1000).toFixed(3)}}</van-col>
            <van-col span="4" v-show="value2 === 'c1'">已撤单</van-col>
            <van-col span="4" v-show="value2 === 'c2'">交易完成</van-col>
            <van-col span="4" v-show="value2 === 'c0'">
              <van-button color='#EE0A24' size="mini" @click="toCancelStock2(item.id)">撤单</van-button>
            </van-col>
          </van-row>
        </div>


        <!-- 提现记录  -->
        <div v-show="value2 === 'd'">
          <com-withdrawal-records :recordArr="recordList"></com-withdrawal-records>
        </div>


        <!-- 充值记录  -->
        <div v-show="value2 === 'e'">
          <van-row style="text-align: center; vertical-align: center; font-weight: bolder; font-size: 13px" align="center" type="flex" justify="space-between">
            <van-col span="6">时间</van-col>
            <van-col span="6">充值类型</van-col>
            <van-col span="6">金额(￥)</van-col>
            <van-col span="6">状态</van-col>
          </van-row>
          <van-row type="flex" style="text-align:center" align="center" justify="space-between" v-for="item in recordList" :key="item.id">
            <van-col span="6">{{item.create_time}}</van-col>
            <van-col span="6">{{ cashToWay[(item.type)] }}</van-col>
            <van-col span="6">{{ (item.caip / 1000).toFixed(3) }}</van-col>
            <van-col span="6">{{item.status === 0 ? '充值成功' : '充值失败'}}</van-col>
          </van-row>
        </div>


      </van-cell>

      <van-pagination
        v-model="pageIndex"
        style="margin-top: 3px"
        :total-items="totalRecord"
        :items-per-page="pageSize"
        force-ellipses
        @change="handleChange2"
      />
    </div>
    <van-divider style="margin-top: 66px" v-else v-show="value1 || value2">暂无记录</van-divider>
    <van-divider style="margin-top: 88px" v-show="!value1 && !value2">请选择股份名、分类查看</van-divider>
  </div>

</template>

<script>
  import {Toast, Notify, Dialog} from 'vant';
  import cashToWay from '../../constants/cashToWay';
  import comWithdrawalRecords from '../../components/comWithdrawalRecords'

  export default {
    name: 'generalRecord',
    components: {
      comWithdrawalRecords,
    },
    data(){
      return {
        cashToWay,
        allZiBen: '',
        title1: '请选择股份名',
        value1: '',
        isDisabled: false,
        value2: '',
        option1: [],
        needStockObj: {},
        needTypeObj: {},
        option2: [
          { text: '分红记录', value: 'a' },
          { text: '买入记录', value: 'b' },
          { text: '挂单（正在卖出）', value: 'c0' },
          { text: '已撤单', value: 'c1' },
          { text: '已成交', value: 'c2' },
          { text: '提现记录', value: 'd' },
          { text: '充值记录', value: 'e' },
        ],
        recordList: [],
        pageIndex: 1,
        pageSize: 20,
        totalRecord: 0,
      }
    },

    async mounted() {
      const res =  await this.$api.stock.reqUserAccountAndStockList()
      if (res.code === 200){
        this.stockList = res.data.stocklist
        // 生成所需的数组
        this.option1 = this.stockList.map( item => ({ text: item.name, value: item.id }))

        this.allZiBen = res.data.info.caip
      }
    },

    methods: {

      // 左侧
      doChangeStock(data1){
        // 每次保证是第一页
        this.pageIndex = 1
        this.totalRecord = 0

        const params = {
          // 左侧的value1就是股份的id
          id: this.value1,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        };


        const needObj_1 = this.stockList.find(item => item.id === data1)
        this.needStockObj = needObj_1
        if(this.value1 && this.value2 && this.value2 != 'd' && this.value2 != 'e'){
          // 需要优化
          switch (this.value2) {
            case 'b':
              // 买入
              this._getBuyRecordList(params)
              break
            case 'c0':
              // 挂单
              this._getUnSellList(params)
              break
            case 'c1':
              // 撤单
              this._getMyRevokeList(params)
              break
            case 'c2':
              // 成交
              this._getSellRecordList(params)
              break;
            default:
              // 分红记录
              this._getBonusRecordList(params)
          }
        } else {
          Notify({ type: 'danger', message: '请选择分类 !' });
        }
      },


      // 右侧
      doChangeType(data2){
        // 每次保证是第一页
        this.pageIndex = 1
        this.totalRecord = 0

        const needObj_2 = this.option2.find(item => item.value === data2)
        this.needTypeObj = needObj_2


        // 请求参数
        const params = {
          // 左侧的value1就是股份的id
          id: this.value1,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        };

        if(this.value2 === 'd' || this.value2 === 'e'){
          this.needStockObj = {}
          this.title1 = '筛选条件'
          this.isDisabled = true

          if(this.value2 === 'd'){
            // 提现记录
            this._getCashRecordList(params)
          } else {
            // 充值记录
            this._getRechargeRecordList(params)
          }


        } else {
          const needObj_3 = this.option1.find(item => item.value === this.value1)
          if(needObj_3){
            // 左侧菜单有值
            this.title1 = needObj_3.text || '请选择股份名'
            this.isDisabled = false

            // 发请求
            if(this.value1 && this.value2){
              switch (this.value2) {
                case 'b':
                  // 买入
                  this._getBuyRecordList(params)
                  break
                case 'c0':
                  // 挂单
                  this._getUnSellList(params)
                  break
                case 'c1':
                  // 撤单
                  this._getMyRevokeList(params)
                  break
                case 'c2':
                  // 成交
                  this._getSellRecordList(params)
                  break;
                default:
                  // 分红记录
                  this._getBonusRecordList(params)
              }
            }

          } else {
            Notify({ type: 'danger', message: '请选择股份名称 !' });
            this.title1 = '请选择股份名'
            this.isDisabled = false
          }
        }
      },

      handleChange2(value) {
        const params = {
          // 左侧的value1就是股份的id
          id: this.value1,
          pageIndex: value,
          pageSize: this.pageSize,
        };

        if (this.value2){
          // 分情况讨论
          switch (this.value2) {
            case 'b':
              // 买入
              this._getBuyRecordList(params)
              break
            case 'c0':
              // 挂单
              this._getUnSellList(params)
              break
            case 'c1':
              // 撤单
              this._getMyRevokeList(params)
              break
            case 'c2':
              // 成交
              this._getSellRecordList(params)
              break
            case 'd':
              // 提现
              this._getCashRecordList(params)
              break
            case 'e':
              // 充值
              this._getRechargeRecordList(params)
              break
            default:
              // 分红记录
              this._getBonusRecordList(params)
          }
        } else {
          Toast('请选择股份名、分类进行分页查看 !')
        }

      },


      toCancelStock2(id){
        Dialog.confirm({
          title: '股份撤单',
          message: '你确定撤单吗？撤单后，股份会撤回到我的股份中！',
        })
          .then(() => {
            // 点击撤单
            this.$api.stock.reqRevokeSell(id).then(res =>{
              if(res.code===200){
                Toast.success(res.data);
                // 参数
                const params_1 = {
                  id: this.value1,
                  pageIndex: 1,
                  pageSize: this.pageSize,
                }
                // 再次获取
                this._getUnSellList(params_1)
              }
            })
          })
          .catch(() => {
            // on cancel
          });
      },


      // 分红记录
      _getBonusRecordList(params){
        this.$api.stock.reqBonusList(params).then(res =>{
          if(res.code===200){
            this.recordList = res.data.items
            this.totalRecord = res.data.total || res.data.count
          }
        })
      },

      // 买入记录
      _getBuyRecordList(params){
        this.$api.stock.reqBuyRecord(params).then(res =>{
          if(res.code===200){
            this.recordList = res.data.items
            this.totalRecord = res.data.total || res.data.count
          }
        })
      },

      // 挂单
      _getUnSellList(params){
        // 挂单列表
        this.$api.stock.reqMySellingList(params).then(res =>{
          if(res.code===200){
            this.recordList = res.data.items
            this.totalRecord = res.data.total  || res.data.count
          }
        });
      },

      // 已撤单
      _getMyRevokeList(params){
        this.$api.stock.reqMyRevokeList(params).then(res =>{
          if(res.code===200){
            this.recordList = res.data.items
            this.totalRecord = res.data.total || res.data.count
          }
        })
      },

      // 已成交
      _getSellRecordList(params){
        this.$api.stock.reqSellRecordList(params).then(res =>{
          if(res.code===200){
            this.recordList = res.data.items
            this.totalRecord = res.data.total  || res.data.count
          }
        })
      },

      // 提现记录
      _getCashRecordList(params){
        this.$api.stock.reqCashRecordList(params).then(res =>{
          if(res.code===200){
            this.recordList = res.data.items
            this.totalRecord = res.data.total  || res.data.count
          }
        })
      },

      // 充值记录
      _getRechargeRecordList(params){
        this.$api.stock.reqRechargeRecordList(params).then(res =>{
          if(res.code===200){
            this.recordList = res.data.items
            this.totalRecord = res.data.total  || res.data.count
          }
        })
      },


    },

  }
</script>

<style lang="scss" scoped>
  .generalRecord_page{
    .head {
      height: 100px;
      width:150px;
      border-radius: 50%;
      color: #fff;
      background-color:#0099FF;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 30px auto;
    }
  }
</style>
